<template>
  <div class="bet-card">
    <div class="bet-title">
      <span>{{ lottList.playTypeName }}</span>
      <span class="biaowei">{{ jisuanBiaoWei(lottList.playTypeCode) }}</span>
    </div>
    <div class="bet-content">
      <ul class="number">
        <li
          v-for="(item, index) in lottList.cachePlayList"
          :key="`number-${index}`"
          :class="{ active: selectedNumber.includes(item.playCode) }"
          @click="changeSelectNumber(item)"
        >
          <div>
            <span>{{ item.playName }}</span>
            <span class="rate">{{ item.maxOdds }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { findIndex } from 'lodash-es'
export default {
  name: 'arrow-animate',
  props: {
    lottList: {},
    type: {
      default: '',
      type: String,
    },
    betInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selectedNumber: [],
      selectedList: [],
      biaowei: {
        EMQW: '10000',
        EMBW: '01000',
        EMSW: '00100',
        EMGW: '00010',
      },
    }
  },
  // watch: {
  //   betInfo: {
  //     deep: true,
  //     handler(value) {
  //       if(Object.keys(value).length==0){
  //         this.selectedNumber = value[this.type] || [];
  //         this.currentType = '';
  //       }
  //     },
  //   },
  // },
  mounted() {
    if (this.betInfo[this.type] && this.betInfo[this.type].length > 0) {
      this.selectedNumber = this.betInfo[this.type]
    }
  },
  methods: {
    changeSelectNumber(number) {
      const index = findIndex(this.selectedList, ({ playCode }) => playCode === number.playCode);
      if (index === -1) {
        this.selectedList.push(number);
        this.selectedNumber.push(number.playCode);
      } else {
        this.selectedList.splice(index, 1);
        this.selectedNumber.splice(index, 1); // 使用splice方法移除元素
      }
      this.$emit('setData', { type: this.type, data: this.selectedNumber });
    },
    rotateArrow() {
      this.rotation += 180
    },
    jisuanBiaoWei(type) {
      return this.biaowei[type]
        ? this.biaowei[type]
            .split('')
            .map((item) => (item === '0' ? 'x' : '⊡'))
            .join('')
        : ''
    },
    clear() {
      this.selectedList.splice(0);
      this.selectedNumber.splice(0);
    },
    delSingle(item) {
      const index = this.selectedList.findIndex(
          (ii) =>
              ii.playCode === item.playCode &&
              ii.sonPlayTypeCode === item.sonPlayTypeCode &&
              ii.playTypeCode === item.playTypeCode,
      );

      if (index > -1) this.changeSelectNumber(item);
    },
  },
}
</script>

<style scoped lang="less">
.bet-card {
  margin-bottom: 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  .bet-title {
    color: #CFD1FF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 5px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 400;
    padding-right: 8px;
    &::before {
      position: absolute;
      left: -3px;
      content: '';
      height: 12px;
      width: 2px;
      border-radius: 0 2px 2px 0;
      background-color: #CFD1FF;
    }
    .biaowei {
      font-size: 16px;
      color: #ff0808;
    }
  }
}
.bet-content {
  width: 100%;
}
.number {
  display: flex;
  justify-content: space-around;
  color: #5e6994;
  row-gap: 5px;
  li {
    background: linear-gradient(180deg, #333950 0%, #24253d 100%);
    width: 80px;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 4px;
      height: 100%;
      width: 100%;
    }
    span {
      line-height: 1;
    }
    .rate {
      color: #7b85a6;
      font-size: 11px;
    }
    &.active {
      background: linear-gradient(354deg, #3d35c6 4.34%, #6c4fe0 95.73%); // > div {
      //   background: radial-gradient(140.65% 140.65% at 77.94% 0%, #77d7ff 0%, #4d7afc 70.55%, #4385f8 99.98%);
      // }
      color: #fff;
      .rate {
        color: #fff;
      }
    }
  }
}
</style>
